<template>
  <div>
    <div class="title-extend">

      <upload
        class="upload-demo"
        :action="getAction()"
        :headers="headers"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        ref="testApi"
        multiple
        :data="{id: form.pId,currentName: form.title}"
        :limit="30"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <Button ghost type="primary">上传文件</Button>
      </upload>
      <Button ghost  type="primary" @click="open(form.pId,form.title)">新建文件夹</Button>
    </div>
    <div class="detil-org">
      <Form :label-width="80">
        <FormItem label="文件名称">
          {{form.title}}
        </FormItem>
        <FormItem label="文件类型">
          {{type}}
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util.js';
import apiUtil from '@/libs/apiUtil.js';
import config from '@/config/config';
import { getToken } from '@/libs/platformUtil';
import Edit from "./edit";
import Detail from "./detail";

export default {
  name: "uploadFile",
  props: {
    datas: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      headers: {
        Authorization: ""
      },
      fileList: [],
      form: {
        id:"",
        code: "",
        title: "",
        type: "",
        pId: "",
        isLasted:""
      }
    }
  },
  computed:{
    type:function () {
      if(this.form.type ==='file'){
        return '文件库'
      }else if(this.form.type ==='db'){
        return    '资源库'
      }else if(this.form.type ==='tree'){
        return '资源目录'
      }else if(this.form.type==='job')
      {
        return   '作业'
      }else if(this.form.type==='transformation')
      {
        return   '转换'
      }else if(this.form.type==='root') {
        return '根节点'
      }else {
        return '资源子目录'
      }
    }
  },
  created(){
    this.form = this.datas
    this.headers.Authorization = 'Bearer ' + getToken();
  },
  watch: {
    datas(val) {
      this.form = val
    }
  },
  methods: {

    doDeleteOrg(id,name) {
      var self = this

      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定要删除吗?</p>',
        onOk: () => {
          alert("删除成功！")
          util.ajax.get(config.xtlServerContext + "/op/file/deleteFile", {
            params: {
              id: id,
              currentName: name
            }
          }).then(function (resp) { }).catch((err) => {
            self.$Message.error("数据获取异常,错误信息:" + err);
          })

        }
      });
    },
    testApi(value,destFile) {
      let self = this
      util.ajax.post(config.xtlServerContext+"/op/file/fileUpload",{destFile:"destFile"}).then(function(resp) {
        self.$Message.success(resp);
      }).catch((err) => {
        this.$Message.error("错误信息:" + err);
      })
    },
    getAction() {
      return apiUtil.getApiBaseUrl() + '/xtl-server/op/file/fileUpload';
    },
    open(id,title) {
      let self=this
      this.$prompt('请输入名称', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(({ value }) => {
      self.$message({
        type: 'success',
        message: '你的名称是: ' + value
        });
      if (id==99){
        util.ajax.get(config.xtlServerContext + "/op/file/mkDirs", {
          params: {
            path: title,
            name: value
          }
        })
      }else {
        util.ajax.get(config.xtlServerContext + "/op/file/mkDirs", {
          params: {
            path: id,
            name: value
          }
        })
      }

    }).catch(() => {
      self.$message({
        type: 'info',
        message: '取消输入'
      });
    });
    },
    goCreatePage() {
      alert("上传文件！")
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 30 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeUpload(file){
      console.log(file)
    }
  }
}
</script>

<style lang="less">
.title-extend{
  display: flex;
}
.detil-org {
  .ivu-form-label-right {
    .ivu-form-item {
      label {
        margin-right: 10px !important;
      }
    }
  }
}

</style>
